<template>
  <div>
    <el-dialog v-model="info.isshow" :title="form.id > 0 ? '修改' : '新增'">
      <el-form :model="form" :rules="rules" ref="menuref" >
        <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="pid">
          <el-select v-model="form.pid" placeholder="请选择" @change="choose">
            <el-option label="顶级菜单" :value="0" />
            <el-option :label="item.title" v-for="item in menulists" :key="item.id" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" :label-width="formLabelWidth" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">目录(一级菜单)</el-radio>
            <el-radio :label="2">菜单(二级菜单)</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" autocomplete="off" />
        </el-form-item>

        <el-form-item v-if="form.type == 1" label="菜单图标" :label-width="formLabelWidth">
          <el-input v-model="form.icon" autocomplete="off" />
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="菜单地址" :label-width="formLabelWidth">
          <el-input v-model="form.url" autocomplete="off" />
        </el-form-item>

        <el-form-item label="菜单状态" :label-width="formLabelWidth" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="reset">取消</el-button>
          <el-button type="primary" @click="submit">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { reactive, ref, computed, onMounted, toRefs, nextTick } from "vue";
import { useStore } from "vuex";
import type { FormInstance } from 'element-plus'
import { ElMessage } from "element-plus";
import api from "../../request/api"
export default {
  props: ['info'],

  setup(props: any) {
    const store = useStore()
    const formLabelWidth = "140px";
    // form
    const menuref = ref<FormInstance>()

    // 表单数据
    const form: any = reactive({
      pid: '',
      type: '',
      title: '',
      icon: '',
      status: '',
      url: ''
    });
    // 选项设置
    const rules = reactive({
      pid: [{
        required: true,
        message: "请选择上级菜单", trigger: "blur"
      }],
      title: [{ required: true, message: "请输入菜单标题", trigger: "blur" }],
      type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
      status: [{ required: true, message: "请选择菜单状态", trigger: "blur" }]
    })
    //数据
    const menulists = computed(() => store.state.menu.menulists);
    //获取请求数据
    onMounted(() => {
      store.dispatch("menu/getmenulist");
    });

    // 选择上级菜单
    const choose = (val: any) => {
      console.log(val);
      console.log(val);
      if (val == 0) {
        // 顶级菜单
        form.type = 1
      } else {
        // 二级菜单
        form.type = 2
      }
    }

    // 取消
    const reset = () => {
      // 关闭弹窗
      props.info.isshow = false;
      // 重置
      menuref.value?.resetFields()
      let a = {
        pid: '',
        type: '',
        title: '',
        icon: '',
        status: '',
        url: ''
      }
      Object.assign(form, a)
      }

    // 确定
    const submit = () => {
      // if (!menuref) return
      menuref.value?.validate((val: any) => {
        if (val) {
          // console.log('submit!')
          // 接口
          let url = form.id > 0 ? "menuedit" : "menuadd"
          api.menuaddedit(url, form).then((res: any) => {
            if (res.code == 200) {
              // 提示信息
              ElMessage.success(res.msg)
              // 弹框
              props.info.isshow = false
              // 更新页面
              store.dispatch("menu/getmenulist");
              // 清空内容
              reset()
            }
          })
        } else {
          // console.log('error submit!')
          ElMessage.error("请填写完整的信息")
          return false
        }
      })
    }

    // 数据回显
    const setInfo = (obj: any) => {
      Object.assign(form, obj)
      // // nextTick(() => {
      // console.log({ ...obj });
      // // 数据回显赋值
      // // props.info.form = { ...obj }
      // form.formdata = { ...obj }
      // // console.log(form);
      // console.log(form.formdata);

      // // form.value = { ...obj }
      // form.pid = obj.pid
      // form.id = obj.id
      // form.title = obj.title
      // form.type = obj.type
      // form.status = obj.status
      // form.url = obj.url
      // form.icon = obj.icon
      // })
    }


    return {
      submit,
      reset,
      choose,
      menulists,
      form,
      formLabelWidth,
      rules,
      menuref,
      setInfo

    }
  }
}

</script>

<style lang="scss" scoped>

</style>